<template>
    <div ref="chartRef" class="trend-chart" />
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, onUnmounted, ref, watch } from 'vue'

const chartRef = ref()
const chartInstance = ref()
const chartData = ref([
    { name: '整改', value: '400' },
    { name: '未整改', value: '60' }
])

// 计算x轴最大值（数据最大值+50）
const calculateXAxisMax = () => {
    const values = chartData.value.map(item => Number(item.value));
    const maxValue = Math.max(...values);
    return maxValue + 50;
}


watch(() => chartData.value, (newVal) => {
    if (newVal.length === 0) return
    chartInstance.value.setOption({
        xAxis: {
            max: calculateXAxisMax()
        },
        series: [
            {
                name: "barData",
                data: newVal
            }
        ]
    })
}, { deep: true })

const initData = () => {
    // 定义渐变配置
    const gradients = [
        // 第一条数据渐变
        {
            x: 0, y: 0, x2: 1, y2: 0,
            colorStops: [
                { offset: 0, color: 'rgb(94, 98, 247,0.2)' },
                { offset: 1, color: '#5f63f6' }
            ]
        },
        // 第二条数据渐变
        {
            x: 0, y: 0, x2: 1, y2: 0,
            colorStops: [
                { offset: 0, color: 'rgb(112, 237, 105,0.2)' },
                { offset: 1, color: '#70ed69' }
            ]
        }
    ];
    const data = {
        title: {
            show: false
        },
        tooltip: {
            show: false,
            trigger: "axis",
            backgroundColor: "rgba(21, 154, 255, 0.32)",
            textStyle: {
                color: "#fff",
            },
            borderColor: "#159AFF",
            axisPointer: {
                lineStyle: {
                    color: "transparent",
                },
            },
        },
        grid: {
            // containLabel: true,
            bottom: 0,
            left: '25%',
            top: 10,
            right: '22%',
        },
        xAxis: {
            type: "value",
            max: calculateXAxisMax(), // 设置最大值
            axisLabel: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
        },
        yAxis: [
            {
                type: "category",
                inverse: true,
                axisLabel: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
            },
            {
                type: "category",
                data: chartData.value.map(item => item.value),
                inverse: true,
                axisLabel: {
                    inside: true,// 数值和图表分离
                    verticalAlign: "bottom",
                    lineHeight: 3,
                    margin: -35,
                    color: '#FFFFFF',
                    fontSize: 16,
                    formatter: function (value) {
                        const number = Number(value || 0)
                        return number
                    },
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: "barData",
                type: "bar",
                barWidth: 5,
                showBackground: true,
                data: chartData.value,
                backgroundStyle: {
                    color: 'rgba(255, 255, 255, .1)',
                },
                label: {
                    show: true,
                    offset: [-40, 0],
                    color: 'rgba(255, 255, 255, .8)',
                    fontSize: 14,
                    position: 'left',
                    align: 'left',
                    formatter: function (params) {
                        return params.data.name
                    },
                },
                itemStyle: {
                    color: function (params) {
                        return {
                            type: 'linear',
                            ...gradients[params.dataIndex],
                            global: false
                        };
                    }
                },
                emphasis: {
                    itemStyle: {
                        color: function (params) {
                            return {
                                type: 'linear',
                                ...gradients[params.dataIndex],
                                global: false
                            };
                        }
                    }
                },
            },
            {
                name: "外圆",
                type: "scatter",
                emphasis: {
                    scale: false,
                },
                tooltip: {
                    show: false
                },
                // 方块
                symbol: "roundRect",
                symbolSize: [4, 13],// 进度条白点
                itemStyle: {
                    color: '#FFFFFF',
                },
                z: 2,
                data: chartData.value,
                animationDelay: 500,
            },
        ],
    };
    data && chartInstance.value.setOption(data)
}
onMounted(() => {
    chartInstance.value = echarts.init(chartRef.value)
    initData()
})

</script>

<style scoped lang="scss">
.trend-chart {
    width: 100%;
    height: 100%;
}
</style>